﻿<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" x:Class="LogInModule.Views.GameInicialization.CharacterSelectionView"
    >
    
    <Grid Background="Transparent"
          Margin="350 100 0 0">
    	<VisualStateManager.VisualStateGroups>
    		<VisualStateGroup x:Name="VisualStateGroup">
    			<VisualStateGroup.Transitions>
    				<VisualTransition GeneratedDuration="0:0:1" To="SelectBoyState">
    					<VisualTransition.GeneratedEasingFunction>
    						<CubicEase EasingMode="EaseOut"/>
    					</VisualTransition.GeneratedEasingFunction>
    				</VisualTransition>
    				<VisualTransition GeneratedDuration="0:0:1" To="SelectGirlState">
    					<VisualTransition.GeneratedEasingFunction>
    						<CubicEase EasingMode="EaseOut"/>
    					</VisualTransition.GeneratedEasingFunction>
    				</VisualTransition>
    				<VisualTransition From="SelectBoyState" GeneratedDuration="0:0:1" To="SelectGirlState">
    					<VisualTransition.GeneratedEasingFunction>
    						<CircleEase EasingMode="EaseInOut"/>
    					</VisualTransition.GeneratedEasingFunction>
    				</VisualTransition>
    				<VisualTransition From="SelectGirlState" GeneratedDuration="0:0:1" To="SelectBoyState">
    					<VisualTransition.GeneratedEasingFunction>
    						<CubicEase EasingMode="EaseInOut"/>
    					</VisualTransition.GeneratedEasingFunction>
    				</VisualTransition>
    			</VisualStateGroup.Transitions>
    			<VisualState x:Name="SelectBoyState">
    				<Storyboard>
    					<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="stackPanel">
    						<DiscreteObjectKeyFrame KeyTime="0">
    							<DiscreteObjectKeyFrame.Value>
    								<Visibility>Visible</Visibility>
    							</DiscreteObjectKeyFrame.Value>
    						</DiscreteObjectKeyFrame>
    					</ObjectAnimationUsingKeyFrames>
    					<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="stackPanel" />
    				</Storyboard>
    			</VisualState>
    			<VisualState x:Name="SelectGirlState">
    				<Storyboard>
    					<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Visibility)" Storyboard.TargetName="stackPanel1">
    						<DiscreteObjectKeyFrame KeyTime="0">
    							<DiscreteObjectKeyFrame.Value>
    								<Visibility>Visible</Visibility>
    							</DiscreteObjectKeyFrame.Value>
    						</DiscreteObjectKeyFrame>
    					</ObjectAnimationUsingKeyFrames>
    					<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="stackPanel1"/>
    				</Storyboard>
    			</VisualState>
    		</VisualStateGroup>
    	</VisualStateManager.VisualStateGroups>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <TextBlock Grid.Row="0"
                   HorizontalAlignment="Center"
                   Text="Choose a character"
                   Margin="10 5 10 0"
                   FontSize="60"
                   FontFamily="Segoe UI" Foreground="White"/>

        <StackPanel Orientation="Horizontal"
                    Margin="0 20 0 20"
                    Grid.Row="1"
                    VerticalAlignment="Center"
                    HorizontalAlignment="Center" Width="370">
        	<StackPanel Margin="0,0,170,0" Orientation="Vertical">
        		<TextBlock Text="female" Foreground="#FF4A6306" FontFamily="Segoe UI" FontWeight="Bold" FontSize="18.667" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,0,10" />
				<Button x:Name="Girls"
	                    Cursor="Hand"
	                    Background="Transparent">
	            	<i:Interaction.Triggers>
	            		<i:EventTrigger EventName="Click" SourceObject="{Binding ElementName=Girls}">
	            			<ei:GoToStateAction StateName="SelectGirlState"/>
	            		</i:EventTrigger>
	            	</i:Interaction.Triggers>
	                <Button.Template>
	                    <ControlTemplate TargetType="Button">
	                        <ContentPresenter Content="{TemplateBinding Content}" />
	                    </ControlTemplate>
	                </Button.Template>
	                <Image Source="../images/female.png"
	                       Height="120" />
	            </Button>
			</StackPanel>
			<StackPanel Orientation="Vertical">
				<TextBlock Text="male" Foreground="#FF4A6306" FontFamily="Segoe UI" FontWeight="Bold" FontSize="18.667" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,0,0,10" />
	            	            <Button x:Name="Boys"
	                    Cursor="Hand"
	                    Background="Transparent">
	                <Button.Template>
	                    <ControlTemplate TargetType="Button">
	                        <ContentPresenter Content="{TemplateBinding Content}" />
	                    </ControlTemplate>
	                </Button.Template>
	            	<i:Interaction.Triggers>
	            		<i:EventTrigger EventName="Click" SourceObject="{Binding ElementName=Boys}">
	            			<ei:GoToStateAction StateName="SelectBoyState"/>
	            		</i:EventTrigger>
	            	</i:Interaction.Triggers>
	                <Image Source="../images/male.png"
	                       Height="120" />
	            </Button>
			</StackPanel>
        </StackPanel>

    	<Grid Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" Width="780">
    		<Grid.ColumnDefinitions>
                <ColumnDefinition Width="390" />
                <ColumnDefinition Width="390" />     	
    		</Grid.ColumnDefinitions>
    		
    		<StackPanel x:Name="stackPanel1" Orientation="Horizontal" Grid.Column="0" Width="390" HorizontalAlignment="Right" Opacity="0">
    			<Button x:Name="GirlButton"
    				Cursor="Hand"
    				Background="Transparent"
    				Click="GirlButton_Click"
    				Margin="20 0 20 00">
    				<Button.Template>
    					<ControlTemplate TargetType="Button">
    						<ContentPresenter Content="{TemplateBinding Content}" />
    					</ControlTemplate>
    				</Button.Template>
                    <Image Source="/MainGameModule;component/Images/Girl/right/kid0001.png"
    					Height="100" />
    			</Button>
	            
    			<Button x:Name="MoliButton"
    				Cursor="Hand"
    				Background="Transparent"
    				Click="MoliButton_Click"
    				Margin="20 0 20 0">
    				<Button.Template>
    					<ControlTemplate TargetType="Button">
    						<ContentPresenter Content="{TemplateBinding Content}" />
    					</ControlTemplate>
    				</Button.Template>
                    <Image Source="/MainGameModule;component/Images/Moli/right/kid0001.png"
    					Height="100" />
    			</Button>

                <Button x:Name="MoniButton"
                        Cursor="Hand"
                        Background="Transparent"
                        Click="MoniButton_Click"
                        Margin="20 0 20 0">
                    <Button.Template>
                        <ControlTemplate TargetType="Button">
                            <ContentPresenter Content="{TemplateBinding Content}" />
                        </ControlTemplate>
                    </Button.Template>
                    <Image Source="/MainGameModule;component/Images/Moni/right/kid0001.png"
                           Height="100" />
                </Button>
            </StackPanel>
			
			<StackPanel x:Name="stackPanel" Orientation="Horizontal" Width="390" HorizontalAlignment="Left" Opacity="0" Grid.Column="1">
    			<Button x:Name="BoyButton"
    				Cursor="Hand"
    				Background="Transparent"
    				Click="BoyButton_Click"
    				Margin="20 0 20 0">
    				<Button.Template>
    					<ControlTemplate TargetType="Button">
    						<ContentPresenter Content="{TemplateBinding Content}" />
    					</ControlTemplate>
    				</Button.Template>
                    <Image Source="/MainGameModule;component/Images/Boy/left/kid0001.png"
    					Height="100" />
    			</Button>

    			<Button x:Name="KidoButton"
    				Cursor="Hand"
    				Background="Transparent"
    				Click="KidoButton_Click"
    				Margin="20 0 20 0">
    				<Button.Template>
    					<ControlTemplate TargetType="Button">
    						<ContentPresenter Content="{TemplateBinding Content}" />
    					</ControlTemplate>
    				</Button.Template>
                    <Image Source="/MainGameModule;component/Images/Kido/left/kid0001.png"
    					Height="100" />
    			</Button>

                <Button x:Name="SebastianButton"
                        Cursor="Hand"
                        Background="Transparent"
                        Click="SebastianButton_Click"
                        Margin="20 0 20 0">
                    <Button.Template>
                        <ControlTemplate TargetType="Button">
                            <ContentPresenter Content="{TemplateBinding Content}" />
                        </ControlTemplate>
                    </Button.Template>
                    <Image Source="/MainGameModule;component/Images/Sebastian/left/kid0001.png"
                           Height="100" />
                </Button>
            </StackPanel>
			
    	</Grid>
    </Grid>
    
</UserControl>
